<template>
  <div>
    <!-- 子订单详情，放在订单详情里面太冗余了 -->
    <a-descriptions title="用户信息" bordered>
      <a-descriptions-item label="服务时间" :span="2">{{ order.orderTime }}</a-descriptions-item>
      <a-descriptions-item v-if="order.modifiedServiceTime" label="更改后服务时间" :span="2">{{
        order.modifiedServiceTime
      }}</a-descriptions-item>
      <a-descriptions-item label="服务地址" :span="2">{{ order.originalServiceAddress }}</a-descriptions-item>
      <a-descriptions-item v-if="order.theModifiedServiceAddress" label="更改后服务地址" :span="2">{{
        order.theModifiedServiceAddress
      }}</a-descriptions-item>
      <a-descriptions-item label="完成时间" :span="2">{{ order.endTime }}</a-descriptions-item>
      <a-descriptions-item label="服务结束时间" :span="2">{{ order.finishTime }}</a-descriptions-item>
    </a-descriptions>
    <a-divider></a-divider>
    <a-descriptions title="护士信息" bordered>
      <a-descriptions-item label="护士姓名" :span="2">{{ order.nick }}</a-descriptions-item>
      <a-descriptions-item label="护士ID" :span="2">{{ order.nurseId }}</a-descriptions-item>
      <a-descriptions-item label="接单时间" :span="2">{{ order.orderTime }}</a-descriptions-item>
      <a-descriptions-item label="录音时长/秒">{{ order.videoTime }}</a-descriptions-item>
      <a-descriptions-item label="护士手机号" :span="2">{{ order.mobile }}</a-descriptions-item>
    </a-descriptions>
    <a-divider></a-divider>
    <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
      <!-- <a-form-item label="健康档案" >
                 <a-button type="primary" size="small" @click="lookHealth">查 看</a-button>
            </a-form-item> -->

      <!-- 有护理报告的展示 -->
      <!--   <a-form-item label="护理报告" v-if="order.nursingRecord">
        <a-button type="primary" size="small" @click="lookNurseReport"
          >查 看</a-button
        >
      </a-form-item> -->
      <a-form-item label="退款原因" v-if="order.cancelCause">
        {{ order.cancelCause }}
      </a-form-item>
      <a-form-item label="服务费"> {{ priceFilterRole(order.price) }} </a-form-item>
      <!-- <a-form-item label="合计"> 3 </a-form-item> -->
    </a-form>
    <!-- 护理报告 -->
    <template>
      <nurse-report
        v-if="nurseReportVisible"
        :visible="nurseReportVisible"
        @closeModal="closeModal"
        :directShow="true"
        :report="sonOrderReport"
      ></nurse-report>
    </template>
  </div>
</template>
<script>
import { reactive, ref, watch, computed, defineComponent, createVNode, toRefs } from 'vue'
import NurseReport from '@/components/order/NurseReport'
import { selectSonOrderInfo } from '@/api/order/index'
import { usePriceFilterRole } from '@/utils/filter'

export default {
  props: {
    number: {
      type: Number,
      default: ''
    }
  },
  setup(props) {
    const priceFilterRole = usePriceFilterRole
    const data = reactive({
      order: {},
      sonOrderReport: ''
    })
    const nurseReportVisible = ref(false) //是否打开护理报告弹窗

    const lookNurseReport = () => {
      nurseReportVisible.value = true
    }
    // 关闭护理报告弹窗
    const closeModal = () => {
      nurseReportVisible.value = false
    }
    init()
    async function init() {
      let res = await selectSonOrderInfo(props.number, props.status)
      if (res.success) {
        console.log(res, '子订单详情是')
        data.order = res.object
        if (res.object.nursingRecord) {
          // 添加服务对象

          data.sonOrderReport = res.object.nursingRecord //如果有护理报告
        }
      }
    }
    return {
      ...toRefs(data),
      lookNurseReport,
      closeModal,
      nurseReportVisible,
      labelCol: { style: { width: '100px', fontWeight: 'bolder' } },
      wrapperCol: { span: 20, offset: 1 },
      priceFilterRole
    }
  },

  components: {
    NurseReport
  },

  props: {
    number: {
      type: String,
      default: ''
    },
    status: {
      type: String,
      default: ''
    }
  }
}
</script>
